<template>
  <div id="app2">
    <calendar-view
      :show-date="showDate"
      class="theme-default holiday-us-traditional holiday-us-official"
      :events="events"
      @click-event="clicktest"
    >
      <!-- displayPeriodUom="week" -->
      <calendar-view-header
        slot="header"
        slot-scope="{ headerProps }"
        :header-props="headerProps"
        @input="setShowDate"
      />
    </calendar-view>
  </div>
</template>

<script>
import CalendarView from './CalendarView.vue'
import CalendarViewHeader from './CalendarViewHeader.vue'
// import sampleForm from './samplingForm.vue'
// import cascaderForm from '@/components/input/cascader.vue'

export default {
  name: 'CalendarDemoApp',
  components: {
    CalendarView,
    CalendarViewHeader
    // sampleForm,
    // cascaderForm
  },
  data: function () {
    return {
      showDate: new Date(),
      events: [
        {
          id: '1',
          startDate: new Date(),
          endDate: new Date().setFullYear(2019, 3, 22),
          title: 'lalala',
          classes: 'test',
          style: 'background-color: #DF7401'
        },
        {
          id: '2',
          startDate: new Date(),
          endDate: new Date().setFullYear(2019, 3, 22),
          title: 'asdasdasdasdasds',
          classes: 'test',
          style: ''
        }
      ]
    }
  },
  methods: {
    clicktest (e) {
      console.log(e.originalEvent.id)
      // 路由跳转
      this.$router.push(
        '/Sampling/SamplingList/' +
          e.originalEvent.id +
          '/' +
          e.originalEvent.title
      )
    },
    setShowDate (d) {
      this.showDate = d
    }
  }
}
</script>

<style lang="stylus">
// @import '../static/css/default.css'
// @import '../static/css/holidays-us.css'
.test
  cursor pointer
#app2
  display flex
  height 87vh
  width 100%
  margin-left 0px
.theme-default .cv-header, .theme-default .cv-header-day
  background-color #f0f0f0
.theme-default .cv-header .periodLabel
  font-size 1.5em
.theme-default .cv-header button
  color #7f7f7f
.theme-default .cv-header button:disabled
  color #ccc
  background-color #f7f7f7
/* Grid */
.theme-default .cv-day.today
  background-color #ffe
.theme-default .cv-day.past
  background-color #fafafa
.theme-default .cv-day.outsideOfMonth
  background-color #f7f7f7
/* Events */
.theme-default .cv-event
  border-color #e0e0f0
  border-radius 0.5em
  background-color #e7e7ff
  text-overflow ellipsis
.theme-default .cv-event.purple
  background-color #f0e0ff
  border-color #e7d7f7
.theme-default .cv-event.orange
  background-color #ffe7d0
  border-color #f7e0c7
.theme-default .cv-event.continued::before, .theme-default .cv-event.toBeContinued::after
  content ' \21e2 '
  color #999
.theme-default .cv-event.toBeContinued
  border-right-style none
  border-top-right-radius 0
  border-bottom-right-radius 0
.theme-default .cv-event.isHovered.hasUrl
  text-decoration underline
.cv-wrapper.holiday-us-traditional .d2015-04-05 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2016-03-27 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2017-04-16 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2018-04-01 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2019-04-21 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2020-04-12 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2021-04-04 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2022-04-17 .cv-day-number::before
  content '\271D'
.cv-wrapper.holiday-us-traditional .d2023-04-09 .cv-day-number::before
  content '\271D'
/* Cinco de Mayo */
.cv-wrapper.holiday-us-traditional .d05-05 .cv-day-number::before
  content '\1F1F2\1F1FD'
/* Halloween - October 31 */
.cv-wrapper.holiday-us-traditional .d10-31 .cv-day-number::before
  content '\1F383'
/*
****************************************************
Official US Holidays
****************************************************
*/
/* *** Same date every year *** */
/* New Year's Day - January 1 */
.cv-wrapper.holiday-us-official .d01-01 .cv-day-number::before
  content '\1F37E'
/* Independence Day - July 4 */
.cv-wrapper.holiday-us-official .d07-04 .cv-day-number::before
  content '\1F1FA\1F1F8'
/* Veteran's Day - November 11 */
.cv-wrapper.holiday-us-official .d11-11 .cv-day-number::before
  content '\1F396'
/* Christmas Day - December 25 */
.cv-wrapper.holiday-us-official .d12-25 .cv-day-number::before
  content '\1F384'
/* *** Same month position every year *** */
/* Martin Luther King, Jr. Day - 3rd Monday of January */
.cv-wrapper.holiday-us-official.m01 .day.dow1.instance3 .cv-day-number::before
  content '\270C\1F3FE'
/* Washington's Birthday - 3rd Monday in February */
.cv-wrapper.holiday-us-official.m02 .day.dow1.instance3 .cv-day-number::before
  content '\1F34E'
</style>
